<script setup lang="ts">
import { reactive, ref } from "vue";
import { postCompeteAPI, editCompeteAPI } from "@/api/resource.ts";
import { ElMessage } from "element-plus";
import { competeRules } from "@/view/Resource/compete/utils/rules.ts";

const dialogVisible = ref(false)
const id = ref('')
const type = ref(1)
const ruleFormRef = ref()
const emit = defineEmits(['get'])

// 表单数据
const competeData = reactive({
  title: '',
  rules: '',
  award: '',
  sponsor: '',
  startDate: '',
  endDate: '',
  desc: ''
})

// 初始
const init = (row: any, number: number) => {
  dialogVisible.value = true
  type.value = number
  id.value = ''
  if (number === 1) {
    // 编辑
    id.value = row._id
    competeData.title = row.title
    competeData.rules = row.rules
    competeData.award = row.award
    competeData.sponsor = row.sponsor
    competeData.startDate = row.startDate
    competeData.endDate = row.endDate
    competeData.desc = row.desc
  } else {
    // 添加
    competeData.title = ''
    competeData.rules = ''
    competeData.award = ''
    competeData.sponsor = ''
    competeData.startDate = ''
    competeData.endDate = ''
    competeData.desc = ''
  }
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
}

// 添加课程
const handleAdd = async () => {
  const res: any = await postCompeteAPI(competeData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.message
    })
    handleCancel()
    emit('get')
  }
}

// 编辑课程
const handleEdit = async () => {
  const res: any = await editCompeteAPI(id.value, competeData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.message
    })
    handleCancel()
    emit('get')
  }
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog :close-on-click-modal="false" v-model="dialogVisible" :title="type === 0 ? '添加课程':'编辑课程'">
    <el-form
      ref="ruleFormRef"
      :model="competeData"
      status-icon
      :rules="competeRules"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="competeData.title" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="规则" prop="rules">
        <el-input v-model="competeData.rules" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="奖品" prop="award">
        <el-input v-model="competeData.award" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="赞助商" prop="sponsor">
        <el-input v-model="competeData.sponsor" autocomplete="off"/>
      </el-form-item>
      <div class="row-style">
        <el-form-item label="起始时间" prop="startDate">
          <el-date-picker
            v-model="competeData.startDate"
            type="datetime"
            placeholder="Select date and time"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker
            v-model="competeData.endDate"
            type="datetime"
            placeholder="Select date and time"
          />
        </el-form-item>
      </div>
      <el-form-item label="描述" prop="desc">
        <el-input placeholder="CGYM举行本次比赛旨在促进广大健身爱好者增强体魄锻炼，增长健身知识，打造出一个自己满意的好身体。" type="textarea" :rows="4" resize="none" v-model.number="competeData.desc" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleAdd" v-if="type === 0">
          确定
        </el-button>
        <el-button type="primary" @click="handleEdit" v-else>
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.row-style {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
